<template>
    <div style="padding: 20px 0;">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item>
                <el-icon style="padding-right:4px">
                    <HomeFilled />
                </el-icon>
                您当前的位置：首页
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="props.secondary || secondary">{{ secondary ? secondary
                :
                props.secondary
                }}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="props.tabName">{{ props.tabName }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>
<script setup name='PageHeader'>
import { ArrowRight, HomeFilled } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { defineProps, onMounted, ref } from 'vue'
const route = useRoute()
const secondary = ref('')
const props = defineProps({
    tabName: {
        type: String,
        default: '',
    },
    secondary: {
        type: String,
        default: '',
    },

})
onMounted(() => {
    // 这是当我点击详情的时候进行的传参
    if (route.name == '图片展示' && route.query.tabId == 1) {
        secondary.value = '视频展示'
    } else if (route.name == '图片展示' && route.query.tabId == 2) {
        secondary.value = '捐赠项目'
    } else if (route.name != 'DetialInformation') {
        secondary.value = route.name
    } else if (route.name == 'DetialInformation') {
        secondary.value = route.query.linkage
        console.log()
    }
})
</script>

<style lang="scss" scoped>
:deep .el-breadcrumb__inner {
    display: flex;
    align-items: center;
}
</style>
